<!DOCTYPE html>
<html>

<head>
    <meta name="viewport"
        content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script type="text/javascript" src="flexible.min.js">
    </script>
</head>

<body style="background-color: #DADADA;">

    <div style="text-align: center;">
        <canvas id="myCanvas" width="700px" height="520px">
            Your browser does not support the HTML5 canvas tag.
        </canvas>
    </div>


    <script>
        var cas = document.getElementById("myCanvas");
        var ctx = cas.getContext("2d");


        var steps = [

        ]


        this.onload = function () {
            // Draw On Load
            reDraw();
        }

        function productionLines(startX, startY, sqSize) {
            ctx.beginPath();
            ctx.lineWidth = 25;
            ctx.strokeStyle = "grey";
            ctx.moveTo(40, startY + sqSize / 2);
            ctx.lineTo(640, startY + sqSize / 2);
            ctx.stroke();
            var temp = 0;

            temp = startX + sqSize + 5;

            drawSingle(startX, startY, sqSize, "伟杰", 50);
            drawSingle(startX + temp, startY, sqSize, "伟杰", 20);
            drawSingle(startX + temp * 2, startY, sqSize, "伟杰", 70);
            drawSingle(startX + temp * 3, startY, sqSize, "伟杰", 80);

        }

        function drawSingle(startX, startY, defaultSq, workerName, workerEng) {
            // Init Default Parms
            ctx.strokeStyle = "black";
            ctx.lineWidth = 1;

            // 创建一个基本的空正方形
            ctx.beginPath();
            ctx.fillStyle = "white";
            ctx.fillRect(startX, startY, defaultSq, defaultSq);
            ctx.stroke();

            // Center Line
            ctx.beginPath();
            ctx.strokeStyle = "rgba(100, 40, 40, 0.0)";
            var halfSq = defaultSq / 2;
            ctx.moveTo(startX + halfSq, startY);
            ctx.lineTo(startX + halfSq, startY + defaultSq);
            ctx.stroke();

            // Cal Eng Percent
            var k_p = defaultSq / 100;
            console.log(k_p);

            // Draw Eng
            ctx.fillStyle = "black";
            ctx.beginPath();
            ctx.strokeStyle = "grey";
            ctx.moveTo(startX, startY + halfSq + halfSq / 2);
            ctx.lineTo(startX + k_p * workerEng, startY + halfSq + halfSq / 2);
            ctx.lineWidth = 20;
            ctx.stroke();

            ctx.beginPath();
            ctx.font = "18px Arial";
            ctx.textAlign = "center";
            ctx.fillText(workerName, startX + halfSq, startY + 18);
            ctx.textAlign = "center";
            ctx.font = "14px Arial";
            ctx.fillText("体力", startX + halfSq, startY + 40);
            ctx.textAlign = "center";
            ctx.font = "14px Arial";
            ctx.fillText(workerEng, startX + halfSq, startY + 65);
            ctx.stroke();

        }

        function reDraw() {
            basicText(70, 80, 80);
            productionLines(70, 80, 80);
            productionLines(70, 200, 80);
            productionLines(70, 320, 80);
            productionLines(70, 440, 80);

        }

        function basicText(startX, startY, defaultSq) {

            temp = startX + defaultSq + 5;

            ctx.beginPath();
            ctx.font = "18px Arial";

            // First Text
            ctx.strokeStyle = "rgba(100, 40, 40, 0.0)";
            ctx.moveTo(startX + defaultSq / 2, 20);
            ctx.lineTo(startX + defaultSq / 2, 170);
            ctx.stroke();
            ctx.textAlign = "center";
            ctx.fillText("工程师", startX + defaultSq / 2, 30);

            ctx.strokeStyle = "rgba(100, 40, 40, 0.0)";
            ctx.moveTo(startX + temp * 1 + defaultSq / 2, 20);
            ctx.lineTo(startX + temp * 1 + defaultSq / 2, 170);
            ctx.stroke();
            ctx.textAlign = "center";
            ctx.fillText("工人", startX + temp * 1 + defaultSq / 2, 30);


            ctx.strokeStyle = "rgba(100, 40, 40, 0.0)";
            ctx.moveTo(startX + temp * 2 + defaultSq / 2, 20);
            ctx.lineTo(startX + temp * 2 + defaultSq / 2, 170);
            ctx.stroke();
            ctx.textAlign = "center";
            ctx.fillText("技术人员", startX + temp * 2 + defaultSq / 2, 30);

            ctx.strokeStyle = "rgba(100, 40, 40, 0.0)";
            ctx.moveTo(startX + temp * 3 + defaultSq / 2, 20);
            ctx.lineTo(startX + temp * 3 + defaultSq / 2, 170);
            ctx.stroke();
            ctx.textAlign = "center";
            ctx.fillText("质检员", startX + temp * 3 + defaultSq / 2, 30);
            ctx.stroke();
        }


    </script>

</body>

</html>